<template>
  <div>
    <el-select v-model="typeId" placeholder="类别">
      <el-option value="">
        全部
      </el-option>
      <el-option v-for="item in typeList" :key="item.tupeId" :label="item.typeName" :value="item.typeId">
      </el-option>
    </el-select>
    <el-input v-model="clientCode" placeholder="请输入内容" style="width: 200px; margin-left: 20px"></el-input>
    <el-checkbox v-model="checked" style="margin-left: 20px">显示禁用客户</el-checkbox>
    <el-button type="primary" style="margin-left: 20px" @click="getClients(1, 5)">查询</el-button>
<<<<<<< HEAD
    <el-table :data="pageInfo.list" @selection-change="handleSelectionChange" ref="singleTable">
=======
    <el-table :data="pageInfo.list" height="400px" @selection-change="handleSelectionChange" ref="singleTable">
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column width="100" prop="typeName" label="类别"></el-table-column>
      <el-table-column width="100" prop="clientCode" label="编号"></el-table-column>
      <el-table-column width="130" prop="clientName" label="名称"></el-table-column>
      <el-table-column label="联系人" width="400">
        <template slot-scope="scope">
          <table id="contact-table" style="width: 100%; text-align:center;">
            <tr>
              <th>名称</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>联系地址</th>
            </tr>
            <tr v-for="(contact, index) in allContact" :key="index">
              <td v-if="contact.clientId == scope.row.clientId">
                {{ contact.contactName }}
              </td>
              <td v-if="contact.clientId == scope.row.clientId">
                {{ contact.mobile }}
              </td>
              <td v-if="contact.clientId == scope.row.clientId">
                {{ contact.email }}
              </td>
              <td v-if="contact.clientId == scope.row.clientId">
                {{ contact.contactAddress }}
              </td>
            </tr>
          </table>
        </template>
      </el-table-column>
      <el-table-column width="160" prop="remark" label="备注"></el-table-column>
    </el-table>
    <el-pagination style="position: relative;left: 30px;" @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {},
      typeList: [],
      clientCode: "",
<<<<<<< HEAD
=======
      allContact: [],
      typeId: '',
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
      clientName: "",
      selectedRow: null,
      clientId: ""
    }
  },
  methods: {
<<<<<<< HEAD

    // handleSelectionChange: function (selection) {
    //   if (selection.length > 1) {
    //     // 如果选择了多行，取消第一行的选择
    //     this.$refs.singleTable.toggleRowSelection(selection[0], false);
    //   }
    //   // 更新选中行的数据
    //   this.selectedRow = selection[selection.length - 1];
    //   // const clientName = selection.map(item => item.clientName);
    //   this.clientId = selection.map(item => item.clientId)
    //   this.clientCode = selection.map(item => item.clientCode)
    //   console.log(this.clientCode)
    //   this.clientName = this.selectedRow.clientName
    //   // console.log(this.clientId)
    //   // console.log(this.clientName)
    // },
=======
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
    getTypes: function () {
      this.axios({
        url: "/info/type/selectAll",
      }).then(rs => {
        console.log(rs)
        this.typeList = rs.data.typeList
      })
    },
    handleCurrentChange(val) {
      this.getClients(val, 5)
    },
    handleSelectionChange: function (selection) {
      console.log(selection)
      if (selection.length > 1) {
        // 如果选择了多行，取消第一行的选择
        this.$refs.singleTable.toggleRowSelection(selection[0], false);
      }
      // 更新选中行的数据
      this.selectedRow = selection[selection.length - 1];
      this.clientId = selection.map(item => item.clientId)[0]
<<<<<<< HEAD
      this.clientCode = selection.map(item => item.clientCode)[0]
      console.log(this.clientCode)
=======
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
      this.clientName = this.selectedRow.clientName
      console.log(this.clientId)
    },
    getClients: function (pageNum, pageSize) {
      // alert(this.typeId)
      this.axios({
        url: "/info/client/getClientPage",
        params: {
          pageNum: pageNum,
          pageSize: pageSize,
          clientTypeId: this.typeId,
          clientCode: this.clientCode
        }
      }).then(rs => {
        this.pageInfo = rs.data.pageInfo
        console.log(rs)
      })
    },
    //获取联系人
    getAllContact() {
      this.axios.get('/info/contact/getAllContact'
      ).then(rs => {
        this.allContact = rs.data.contactList
      })
    }
  },
  created: function () {
    this.getAllContact()
    this.getClients(1, 5)
    this.getTypes()
  }
}
</script>

<style scoped>
/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
  background-color: #fff1d4;
}

#contact-table {
  border-collapse: collapse;
  text-align: center;
}

#contact-table th,
#contact-table td {
  border: 1px solid gray;
  padding: 0px;
}
</style>